<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<title>智慧食堂</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../css/appTree.css">
		<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/angular-ui-tree/2.22.5/angular-ui-tree.css">
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script src="https://cdn.bootcss.com/angular-ui-tree/2.22.5/angular-ui-tree.js"></script>
		<!--
<script type="text/ng-template" id="nodes_renderer">
 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs " ng-if="node.child && node.child.length > 0" data-nodrag ng-click="toggle(this)">
    <span class="glyphicon"
        ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a>
    {{node.name}}
	<a class="pull-right btn btn-primary btn-xs" data-nodrag="" ng-click="newSubItem(this)" style="margin-right: 8px;">
		<span class="glyphicon glyphicon-plus"></span>
	</a>
 </div>
  <ol ui-tree-nodes="" ng-model="node.child" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.child" ui-tree-node ng-include="'nodes_renderer'">
    </li>
  </ol>
</script>-->
		<div ng-controller="MyController">
			<table ng-repeat="d in data" class="table table-hover">
					<tbody ng-repeat="c in d.cailiao track by $index">
						<tr>
							<td rowspan="7" ng-if="$index ==0">{{d.workshop_name}}{{$index}}</td>
							<td rowspan="{{c.windows.length+1}}">{{c.name}}</td>
						</tr>
						<tr ng-repeat="w in c.windows">
							<td>{{ w.name }}</td>
							<td>{{ w.num }}</td>
						</tr>
					</tbody>
			</table>
			<table class="table table-hover ng-scope">
					<tbody>
						<tr>
							<td rowspan="7" >车间B</td>
						</tr>
						
						<tr>
							<td rowspan="3" >土豆丝</td>
						</tr>
						<tr>
							<td >档口A</td>
							<td >4</td>
						</tr>
						<tr>
							<td >档口B</td>
							<td >6</td>
						</tr>
					</tbody>
					<tbody>
						<tr>
							<td rowspan="7" >车间B</td>
						</tr>
						<tr>
							<td rowspan="4" >青椒丝</td>
						</tr>
							<td >档口A</td>
							<td >4</td>
						</tr><!-- end ngRepeat: w in c.windows -->
						<tr >
							<td>档口B</td>
							<td >6</td>
						</tr><!-- end ngRepeat: w in c.windows -->
						<tr >
							<td >档口C</td>
							<td >2</td>
						</tr><!-- end ngRepeat: w in c.windows -->
					</tbody><!-- end ngRepeat: c in d.cailiao track by $index -->
			</table>
			<table class="table table-hover">
				<tbody >
					
					<tr>
						<td rowspan="7">车间A</td>
						<td rowspan="4">土豆丝</td>
					</tr>
					<tr>
						<td>档口A</td>
						<td>2</td>
					</tr>
					<tr>
						<td>档口B</td>
						<td>3</td>
					</tr>
					<tr>
						<td>档口C</td>
						<td>3</td>
					</tr>
					
					<tr>
						<td rowspan="7" ng-if="false">车间A</td>
						<td rowspan="3">青椒丝</td>
					</tr>
					<tr>
						<td>档口B</td>
						<td>2</td>
					</tr>
					<tr>
						<td>档口C</td>
						<td>3</td>
					</tr>
					
				</tbody>
				
			</table>
		</div>
		<script>
			var myAppModule = angular.module('MyApp', []);
			myAppModule.controller('MyController', function($scope) {
				$scope.data = [
			        {
			        	"workshop_name":"车间A",
			        	"cailiao":[
				        	{
				        		"name":"土豆丝",
				        		"sum":"10",
				        		"windows":[
				        			{
				        				"name":"档口A",
				        				"num":"4"
				        			},{
				        				"name":"档口B",
				        				"num":"6"
				        			}
				        		]
				        	},{
				        		"name":"青椒丝",
				        		"sum":"12",
				        		"windows":[
				        			{
				        				"name":"档口A",
				        				"num":"4"
				        			},{
				        				"name":"档口B",
				        				"num":"6"
				        			},{
				        				"name":"档口C",
				        				"num":"2"
				        			}
				        		]
				        	}
			        	]
			        },{
			        	"workshop_name":"车间B",
			        	"cailiao":[
				        	{
				        		"name":"土豆丝",
				        		"sum":"10",
				        		"windows":[
				        			{
				        				"name":"档口A",
				        				"num":"4"
				        			},{
				        				"name":"档口B",
				        				"num":"6"
				        			}
				        		]
				        	},{
				        		"name":"青椒丝",
				        		"sum":"12",
				        		"windows":[
				        			{
				        				"name":"档口A",
				        				"num":"4"
				        			},{
				        				"name":"档口B",
				        				"num":"6"
				        			},{
				        				"name":"档口C",
				        				"num":"2"
				        			}
				        		]
				        	}
			        	]
			        }
			    ]
//				$scope.data = [{
//					"id": 1,
//					"name": "车间A",
//					"time": "08:00",
//					"manager": "lisi",
//					"phone": "131",
//					"items": [{
//							"id": 1,
//							"name": "土豆丝",
//							"num": 2
//						},
//						{
//							"id": 2,
//							"name": "茄子丝",
//							"num": 2
//						}
//					]
//				},{
//					"id": 1,
//					"name": "车间A",
//					"time": "08:00",
//					"manager": "lisi",
//					"phone": "131",
//					"items": [{
//							"id": 1,
//							"name": "土豆丝",
//							"num": 2
//						},
//						{
//							"id": 2,
//							"name": "茄子丝",
//							"num": 2
//						}
//					]
//				}];
			});
			// 页面加载完成后,再加载模块
			angular.bootstrap(document, ["MyApp"]);
		</script>
		</body>

</html>